import React from 'react';

// import { Get } from "react-axios";
import axios from "axios";

const swiperUrl = 'https://api-haoke-web.itheima.net/home/swiper';
const baseUrl = 'https://api-haoke-web.itheima.net';

// 自己手写一个 Get 组件
//  主要的目的是：锻炼大家的插槽的高级用法
//    react的插槽很强，可以传JSX，还可以传函数。
class Get extends React.Component {
  state = {
    res: null
  };
  componentDidMount() {
    // children 就是插槽的内容
    // params 就是所有标签上的其他作为请求参数的属性
    const { children, ...params } = this.props;
    // 通过 axios 发起请求
    axios(params).then(res => {
      // setState 更新的时候，会自动调用 render 触发视图渲染
      this.setState({ res });
    });
  }
  render() {
    // 拿到插槽传递过来的函数
    const { children } = this.props;
    // 调用插槽函数，传递实参，函数返回渲染好的列表
    return <>{children(null, this.state.res)}</>;
  }
};

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Get url={swiperUrl}>
          {(error, response) => {
            // 获取成功，response 不为空的时候
            if (response !== null) {
              return (
                response.data.body.map(item => <img key={item.id} src={baseUrl + item.imgSrc}></img>)
              );
            } else {
              return <></>;
            }
          }}
        </Get>
      </div>
    );
  }
}

export default App;
